<template>
  <div>
    <div>
      {{ itemValue }}
    </div>
    <n-switch :rail-style="railStyle" v-model:value="status" @update:value="onUploadAction"></n-switch>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, unref, ref, CSSProperties} from 'vue';
import {useDialog, useMessage} from 'naive-ui';
export default defineComponent({
  props: {
    itemValue: {
      type: String,
      default: ''
    },
    switchStatus: {
      type: Boolean,
      default: false
    },
    onUpload: {
      type: Function,
      default: null
    },
    itemKey: {
      type: Object,
    }
  },
  emits: ["on-upload"],

  setup(props) {
    const status = ref(false)
    const dialog = useDialog()
    function onUploadAction(value) {
      let params = {key: unref(props).itemKey, status: value}
      console.log(params);
      if (!value) {
        dialog.info({
          title: '提示',
          content: `被禁用后该玩家将无法正常使用！是否继续操作？`,
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: () => {
            unref(props).onUpload(params)
          },
          onNegativeClick: () => {
            status.value = !value;
          },
        });
      } else {
        dialog.info({
          title: '提示',
          content: `被启用后该玩家将恢复正常使用！是否继续操作？`,
          positiveText: '确定',
          negativeText: '取消',
          onPositiveClick: () => {
            unref(props).onUpload(params)
          },
          onNegativeClick: () => {
            status.value = !value;
          },
        });
      }
    }

    onMounted(async () => {
      console.log('switch status', unref(props).switchStatus, unref(props).itemKey,  unref(props).itemValue )
      status.value = unref(props).switchStatus
    });
    const railStyle = ({focused, checked}: { focused: boolean, checked: boolean }) => {
      const style: CSSProperties = {}
      if (checked) {
        style.background = '#18a058'
        if (focused) {
          style.boxShadow = '0 0 0 2px #2080f040'
        }
      } else {
        style.background = '#d03050'
        if (focused) {
          style.boxShadow = '0 0 0 2px #d0305040'
        }
      }
      return style
    }
    return {
      status,
      onUploadAction,
      railStyle
    }
  },
});
</script>

<style lang="less" scoped></style>
